<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="static/js/echarts-gl.min.js"></script>
    <script src="static/js/jquery.min.js"></script>
</head>

<body>
    <a href="/">Return</a>
    <br>
    <br>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="genre-sales" style="width: 1000px;height:550px;"></div>
    <script type="text/javascript">
        $.getJSON("static/data/genre-sales.json", d => {
            console.log(d);

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('genre-sales'), 'light');

            var dataAxis = d.map(v => v[0]);
            var data = d.map(v => parseInt(v[1])/1e6);

            option = {
                title: {
                    text: '各类型专辑的销量统计图',
                    subtext: '该图统计了各个类型专辑的销量和，从图中可以看出 Indie 类型的专辑销量最高，将近 47 亿。Pop 类型的专辑销量排在第二，约为39亿。',
                    x: 'center',
                    // bottom: 10
                    padding: [0, 0, 15, 0]
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: dataAxis,
                        axisTick: {
                            show: true,
                            alignWithLabel: true,
                            interval: 0
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '# Million Albums',
                        nameLocation: 'middle',
                        nameGap: 50
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',
                        barWidth: '60%',
                        data: data
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        })
    </script>
</body>
</html>